<template>
	<view class="">
		<petBuyer isLeft v-show='path == "petBuyer"' :scrollTop="scrollTop" ref='petBuyer'></petBuyer>
		<petArchive isLeft v-show='path == "petArchive"' :scrollTop="scrollTop" ref='petArchive'></petArchive>
		<petService isLeft v-show='path == "petService"' :scrollTop="scrollTop" ref='petService'></petService>

		<view class="" style="height: 100rpx;">

		</view>
		<view class="cu-bar tabbar bg-white foot">
			<!-- 首页 -->

			<view class="action" :class='{active: item.path == path}' v-for='item in list' @click='toPage(item)'>
				<image class='icon' :src='path == item.path? item.sicon : item.icon'></image>
				<text>{{item.name}}</text>
			</view>
		</view>
		<loginModal ref="loginModal" @loginSuccess="loginSuccess"></loginModal>
	</view>
</template>

<script>
	import petBuyer from '../index/buyer'
	import petArchive from '../archive/index'
	import petService from '../service/buyer'
	import util from '@/common/util'
	export default {
		components: {
			petBuyer,
			petArchive,
			petService
		},
		data() {
			return {
				scrollTop:0,
				path: 'petBuyer',
				list: [{
					name: '宠物',
					path: 'petBuyer',
					icon: 'https://qiyeji.oss-cn-beijing.aliyuncs.com/20250111/202501061159335189.png',
					sicon: 'https://qiyeji.oss-cn-beijing.aliyuncs.com/20250111/202501061159375369.png'
				}, {
					name: '档案',
					path: 'petArchive',
					icon: 'https://qiyeji.oss-cn-beijing.aliyuncs.com/20250111/202501061200102262.png',
					sicon: 'https://qiyeji.oss-cn-beijing.aliyuncs.com/20250111/202501061200135612.png'
				}, {
					name: '服务',
					path: 'petService',
					icon: 'https://qiyeji.oss-cn-beijing.aliyuncs.com/20250111/202501061200447922.png',
					sicon: 'https://qiyeji.oss-cn-beijing.aliyuncs.com/20250111/202501061200503123.png'
				}],
			}
		},
		onLoad(e) {
			if (!util.isLogin.call(this)) {
				return;
			}
			if (e.path) {
				this.path = e.path
			}
			this.params = e;
			this.$nextTick(() => {
				this.init(this.path)
			})
		},
		onPullDownRefresh() {
			this.init(this.path)
		},
		// 上拉加载
		onReachBottom() {
			this.$refs[this.path].reachBottom && this.$refs[this.path].reachBottom()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		methods: {
			loginSuccess(){
				this.init(this.path)
			},
			toPage(item) {
				this.params = {}
				this.path = item.path;
				this.init(this.path)
			},
			init(refName) {
				this.$refs[refName].init && this.$refs[refName].init(this.params)
			}
		}
	}
</script>

<style scoped lang="scss">
	.tabbar {

		.action {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-family: PingFang SC;
			font-size: 24rpx;
			font-weight: 500;

			&.active {
				font-variation-settings: "opsz" auto;
				background: var(--primaryGradBg);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				background-clip: text;
			}

			.icon {
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 4rpx;
			}
		}
	}
</style>